<template>
  <div class="weui-panel full scroll-h step2-wrapper" style="background: #fff">
    <div class="weui-msg">
      <div class="weui-msg__text-area">
        <h2 class="text-center weui-msg__title">填写信息</h2>
        <!-- <p class="weui-msg__desc">填写邀请人id,如无邀请人,可填写100000</p> -->
      </div>
    </div>
    <!-- <div class="weui-cells__title">代理等级</div> -->
    <!-- <div class="weui-cells weui-cells_radio">
      <label class="weui-cell weui-check__label" for="x11">
        <div class="weui-cell__bd">
          <p>一级代理</p>
        </div>
        <div class="weui-cell__ft">
          <input @click="levelPromote(1)" type="radio" class="weui-check" name="radio1" id="x11">
          <span class="weui-icon-checked"></span>
        </div>
      </label>
      <label class="weui-cell weui-check__label" for="x12">

        <div class="weui-cell__bd">
          <p>二级代理</p>
        </div>
        <div class="weui-cell__ft">
          <input @click="levelPromote(2)" type="radio" name="radio1" class="weui-check" id="x12">
          <span class="weui-icon-checked"></span>
        </div>
      </label>
    </div> -->
      <div class="weui-cells__title" style="color: #f44336;">银行卡用于发放佣金，请务必填写正确，保持姓名和卡号一致，并正确填写开户分行所在地址！</div>
      <div class="weui-cells weui-cells_form">
        <div class="weui-cell" :class="{'weui-cell_warn': nameInvalid}">
          <div class="weui-cell__hd">
            <label class="weui-label">姓名</label>
          </div>
          <div class="weui-cell__bd">
            <input class="weui-input text-center width-80" v-model="realName" type="text" maxlength="20">
          </div>
          <div class="weui-cell__ft">
            <!-- <i class="weui-icon-warn"></i> -->
          </div>
        </div>
        <!--  :class="{'weui-cell_warn': telphoneInvalid}" -->
        <div class="weui-cell">
          <div class="weui-cell__hd"><label class="weui-label">手机号码</label></div>
          <div class="weui-cell__bd">
            <input class="weui-input text-center width-80" required v-model="telphone" maxlength="11"
             type="number" pattern="[0-9]*" >
          </div>
          <div class="weui-cell__ft">
            <!-- <i class="weui-icon-warn"></i> -->
          </div>
        </div>
        <!-- :class="{'weui-cell_warn': bankCardInvalid}" -->
         <div class="weui-cell"  >
          <div class="weui-cell__hd">
            <label class="weui-labe">银行卡号</label>
          </div>
          <div class="weui-cell__bd">
            <input class="weui-inputl text-center width-80" v-model="bankCard" type="number" pattern="[0-9]*" maxlength="30">
          </div>
          <div class="weui-cell__ft">
            <!-- <i class="weui-icon-warn"></i> -->
          </div>
        </div>
        <!-- :class="{'weui-cell_warn': bankNameInvalid}" -->
        <div class="weui-cell"  @click="showPicker('bank')" >
          <div class="weui-cell__hd">
            <label class="weui-label">开户银行</label>
          </div>
          <div class="weui-cell__bd address-input bank">
            <span class="weui-input text-center width-80 dashed-border">{{bankName}} </span>
            <!-- <span>银行</span> -->
          </div>
          <div class="weui-cell__ft">
            <!-- <i class="weui-icon-warn"></i> -->
          </div>
        </div>
        <div class="weui-cell" :class="{'weui-cell_warn': bankNameInvalid}">
          <div class="weui-cell__hd">
            <label class="weui-label">开户行分行</label>
          </div>
          <div class="weui-cell__bd address-input subbranch">
            <input class="weui-input text-center width-80" v-model="subbranch" type="text" placeholder="" maxlength="20" @change="onSubBranchChange">
            <!-- <span>分(支)行</span> -->
          </div>
          <div class="weui-cell__ft">
            <!-- <i class="weui-icon-warn"></i> -->
          </div>
        </div>
       

        <div class="weui-cell" @click="showPicker('addr')"  :class="{'weui-cell_warn': addressInvalid}">
          <div class="weui-cell__hd">
            <label class="weui-label">开户行地址</label>
          </div>
          <div class="weui-cell__bd address-input subbranch">
            <span class="weui-input text-center dashed-border width-80">{{province}}{{city}}{{district}}</span>
            <!-- <span>省</span> -->
          </div>
          <!-- <div class="weui-cell__bd address-input city">
            <input disabled class="weui-input text-center" v-model="city" type="text" maxlength="60" placeholder="">
            <span>市</span>
          </div> -->
          <div class="weui-cell__ft">
            <!-- <i class="weui-icon-warn"></i> -->
          </div>
        </div>

        <div style="padding: 10px 3rem;">
          <a class="weui-btn weui-btn_primary" :class="{'weui-btn_disabled': !canSubmit}" @click="showBankQuery = true">
            <span v-show="!applying">提交</span><span v-show="applying">申请中...</span></a>
        </div>
        <div class="weui-msg__opr-area">
          <p class="weui-btn-area">
            <a @click="back" class="weui-btn weui-btn_default">返回上一步</a>
          </p>
        </div>
    </div>
    <awesome-picker
          ref="pickerBank"
          :data="bankData"
          @cancel="handlePickerCancel"
          @confirm="handlePickerConfirm">
        </awesome-picker>
        <awesome-picker
          ref="pickerAddr"
          :data="addrData"
          @cancel="handlePickerCancel"
          @confirm="handlePickerConfirm">
        </awesome-picker>

        <div class="weui-mask weui-mask--visible" v-if="showBankQuery">
      <div class="weui-dialog weui-dialog--visible">
        <div class="weui-dialog__hd">
          <strong class="weui-dialog__title">提示</strong>
        </div>
        <div class="weui-dialog__bd" style="text-align: left;">
          <p class="branch-text">银行卡开户行信息查询步骤</p>
          <p class="branch-text">邮政储蓄银行：拨打客服电话95580 → 按1 → 按4→ 输入卡号→按# 结束→按1信息发送至手机</p>
          <p class="branch-text">农业银行：拨打客服电话95599→按5→按1→输入卡号→按# 结束</p>
          <p class="branch-text">中国银行：拨打客服电话95566→按2→按1→按1→输入卡号→按# 结束</p>
          <p class="branch-text">建设银行：拨打客服电话95533→按1→按1→按3→输入卡号→按# 结束</p>
          <p class="branch-text">工商银行：拨打客服电话95588→按 #→按1→按3→输入卡号→按# 结束</p>
          <p class="branch-text">招商银行：拨打客服电话95555→按 3→按1→按2→输入卡号→按# 结束</p>

          <p style="color: #f44336;">必须正确填写支行信息, 否则无法发放工资.</p>

          <div class="check-box-branch">
            <input id="color-input-red" class="chat-button-location-radio-input" type="checkbox" name="color-input-red" v-model="isFullyNoted" />
            <label for="color-input-red">
              我已了解以上信息
            </label >
          </div>
        </div>
        <div class="weui-dialog__ft">
          <button @click="onTipsConfirm" :disabled="!isFullyNoted" class="weui-btn":class="!isFullyNoted ? 'weui-btn_default' : 'weui-btn_primary'">确定</button>
          <button @click="showBankQuery = false; isFullyNoted = false" class="weui-btn weui-btn_default" style="margin-top: 0;" >取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters, mapMutations, mapState} from 'Vuex'
import Addr from './address';

const BankData = ['中国银行', '中国工商银行', '中国建设银行', '中国农业银行', '招商银行', '交通银行', '中国民生银行', '中信银行', '浦东发展银行', '兴业银行', '平安银行', '广发银行', '中国光大银行', '中国邮政储蓄银行', '长沙银行'];
export default {
  data() {
    return {
      telphone: '',
      telphoneInvalid: false,
      realName: '',
      nameInvalid: false,
      bankName: '',
      bankNameInvalid: false,
      bankCard: '',
      bankCardInvalid: false,
      addressInvalid: false,
      alipayAccount: '',
      applying: false,
      proxyLevel: 3,
      province: '',
      city: '',
      district: '',
      subbranch: '',
      bankData: [BankData],
      addrData: Addr,
      pickerType: 'bank',
      showBankQuery: false,
      isFullyNoted: false,
    }
  },
  mounted() {},
  methods: {
    ...mapMutations(['changeSubmitRes', 'changeProxyLevel']),
    levelPromote(level) {
      console.log(level)
      const tipText = level === 1 ? '一级代理：充值500元，可得到一级代理权限和500个钻石' : '二级代理：充值200元，可得到二级代理权限和200个钻石'
      $.alert(tipText)
    },
    // 读完提示后确定才提交
    onTipsConfirm() {
      this.showBankQuery = false;
      this.submitInfo();
    },
    submitInfo() {
      // const checkedIpt = Array.prototype.slice.call(document.getElementsByName('radio1'), 0).find(ipt => ipt.checked)
      // if (!checkedIpt) {
      //   $.alert('请选择代理等级')
      //   return
      // }
      if (!this.canSubmit || this.applying) {
        return
      }
      // this.proxyLevel = checkedIpt.id === 'x11' ? 2 : 3 
      const send = {
        proxyLevel: this.proxyLevel,
        lftid: this.upperAgentRes.data.lftid,
        auditUid: this.upperAgentRes.data.uid,
        telphone: this.telphone,
        realName: this.realName,
        bankName: this.bankName,
        bankCard: this.bankCard,
        alipayAccount: this.alipayAccount,
        subbranch: this.subbranch,
        province: this.province,
        city: this.city,
        district: this.district
      }
      console.log(send)
      this.applying = true
      this.api.homeApi.apply(send).then(res => res.json()).then(data => {
        this.changeSubmitRes(data)
        this.changeProxyLevel(this.proxyLevel)
        this.applying = false
        // 200代表是之前支付过了 直接显示成功~
        if (data.result === 200) {
          $.alert('您已成为代理')
          return
        }
        if (data.result) {
          $.alert(data.message)
          return 
        }
        this.$router.push({name: 'Step3Pay'})
      })
      window.btn_sound.play();
    },
    back() {
      window.btn_sound.play();
      this.$router.push({name: 'Step1Upper'})
    },
    showPicker(type) {
      this.pickerType = type;
      if(type === 'bank') {
        this.$refs.pickerBank.show();
      } else if(type === 'addr'){
        this.$refs.pickerAddr.show();
      }
      window.btn_sound.play();
    },
    handlePickerCancel() {},
    handlePickerConfirm(ev) {
      if(this.pickerType === 'bank') {
        this.bankName = ev[0].value
      } else if(this.pickerType === 'addr') {
        this.province = ev[0].value;
        this.city = ev[1].value;
        this.district = ev[2].value;
      }
      window.btn_sound.play();
    },
    onSubBranchChange() {
      // 选择支行时弹出提示
      // $.confirm('')
    }
  },
  activated() {
    console.log(this.upperAgentRes.data)
  },
  computed: {
    ...mapState(['upperAgentRes', 'submitRes', 'api']),
    canSubmit() {
      this.telphoneInvalid = this.telphone === ''
      this.nameInvalid = this.name === ''
      this.bankNameInvalid = (this.bankName === '' || this.subbranch === '')
      this.bankCardInvalid = this.bankCard === ''
      this.addressInvalid = (this.province === '' || this.city === '' || this.district === '')
      return !(this.telphoneInvalid ||
       this.nameInvalid || this.bankNameInvalid || this.bankCardInvalid || this.addressInvalid) && !this.applying
    }
  },
  components: {}
}
</script>

<style lang="less">
  input {
    color: black!important;
    text-align: center;
  }

  .weui-label {
    color: black!important;

  }
   .weui-cell_warn {
    color: black!important;
    
  
  }

.address-input {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;

  span {
    white-space: nowrap;
        width: 70%;
        text-align: center;
  }
}

.province {
  width: 16%;
  flex-basis: 16%;
}

.city {
  width: 16%;
  flex-basis: 16%;
}

.district {
  width: 36%;
  flex-basis: 36%;
  span {
    max-width: 70%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
  }
  input {
    min-width: 42%;
    width: 42%;
  }
}

.bank {
  width: 19.5%;
  flex-basis: 19.5%;
}

.subbranch {
  width: 45.5%;
  flex-basis: 45.5%;
}
.weui-cell {
      padding: 10px 6px!important;
}
.weui-label {
  // width: 84px!important;
  width: 100%!important;
  white-space: nowrap;
}

.step2-wrapper {
  input {
    border: dashed 1px #aba;
    border-radius: 4px;
    padding: 0 5px;
  }
}

[class*=" weui-icon-"]:before, [class^=weui-icon-]:before {
    display: inline-block;
    margin-left: .2em;
    margin-right: 0!important;
}
.weui-icon-warn {
    font-size: 19px!important;
}
.weui-cell__hd {
    flex-basis: 25%;
    width: 25%;
}
.weui-cells__title {
    padding-left: 8px;
    padding-right: 8px;
}
 .text-center {
  text-align: center;
 }

 .width-80 {
  width: 80%;
 }

.weui-msg__opr-area {
  margin-bottom: 14px!important;
  .weui-btn-area {
    margin: 2px 58px .3em!important;
  }
}
.dashed-border {
  border: 1px dashed #aba;
  border-radius: 4px;
    padding: 0 5px;
    width: 80%!important;
}
.margin-20 {
  margin-top: 2.3rem;
}

.weui-dialog {
  width: 90%!important;
  max-width: 400px;
}
</style>